<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Settings</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-row *ngIf="gameService.player$ | async as player">
    <ion-col size-xs="12" offset-xs="0" size-md="8" offset-md="2">
      
      <ion-card>
        <ion-card-header>
          <ion-card-title>UI Settings</ion-card-title>
        </ion-card-header>

        <ion-card-content>
          <ion-list class="ion-no-padding">
            <ion-item>
              <ion-label position="stacked">Theme</ion-label>

              <ion-select placeholder="Default" (ionChange)="updateTheme($event)" [(ngModel)]="gameService.theme">
                <ion-select-option *ngFor="let theme of themes">{{ theme }}</ion-select-option>
              </ion-select>
            </ion-item>
          </ion-list>
        </ion-card-content>
      </ion-card>
      
      <ion-card *ngIf="supportsNotifications">
        <ion-card-header>
          <ion-card-title>Notification Settings</ion-card-title>
        </ion-card-header>

        <ion-card-content>
          <ion-list class="ion-no-padding">

            <ion-item>
              <ion-checkbox [checked]="gameService.notificationSettings.enabled" slot="start"
                            (ionChange)="gameService.toggleNotificationSetting('enabled')"></ion-checkbox>

              <ion-label>
                Push Notifications
              </ion-label>
            </ion-item>

            <ng-container *ngFor="let notif of allNotifications">
              <ion-item *ngIf="notificationsEnabled">
                <ion-checkbox [checked]="gameService.notificationSettings[notif.key]" slot="start"
                              (ionChange)="gameService.toggleNotificationSetting(notif.key)"></ion-checkbox>
  
                <ion-label>
                  {{ notif.name }}
                </ion-label>
              </ion-item>
            </ng-container>

          </ion-list>
        </ion-card-content>
      </ion-card>
      
      <ion-card>
        <ion-card-header>
          <ion-card-title>Custom Submissions</ion-card-title>
          <ion-card-subtitle>
            Want to submit some custom items, events and strings? Head on over to <a href="http://itemgen.idle.land/" target="_blank">Idle Itemgen</a> and make a few items, enter them here (one at a time), and hit submit! We also accept direct submissions via GitHub on <a href="https://github.com/IdleLands/Custom-Assets/tree/master/items" target="_blank">the Custom Assets repo</a>. Need help understanding custom replacements for events? Check out the <a href="https://idle.land/docs/event-replacements" target="_blank">help</a>!
          </ion-card-subtitle>
        </ion-card-header>
    
        <ion-card-content>
          <ion-list class="ion-no-padding">
            <ion-item>
              <ion-label position="stacked">
                Item String
              </ion-label>
              <ion-input [(ngModel)]="itemString" type="text" placeholder="[rating slot] itemname..."></ion-input>

              <ion-button color="primary" (click)="submitItem()" slot="end" [disabled]="!itemString">Submit</ion-button>
            </ion-item>
          </ion-list>
        </ion-card-content>
      </ion-card>
      
      <ion-card>
        <ion-card-header>
          <ion-card-title>Integrations</ion-card-title>
          <ion-card-subtitle>
            Integrate IdleLands with other services like <a href="https://discord.gg/3SeVXyu" target="_blank">Discord</a> for various enhanced features.
          </ion-card-subtitle>
        </ion-card-header>
    
        <ion-card-content>
          <ion-list class="ion-no-padding">
            <ion-item>
              <ion-label position="stacked">
                Discord Tag
              </ion-label>
              <ion-input [(ngModel)]="player.discordTag" type="text" placeholder="DiscordTag#0000"></ion-input>

              <ion-button color="primary" (click)="updateDiscordTag(player.discordTag)" slot="end">Update</ion-button>
            </ion-item>

            <!-- kids these days
            <ion-item>
              <ion-label position="stacked">
                IdleLands 3 Character Name
              </ion-label>
              <ion-input [(ngModel)]="player.il3CharName" type="text" placeholder="Your old character name..."></ion-input>

              <ion-button color="primary" (click)="updateIL3CharName(player.il3CharName)" slot="end">Update</ion-button>
            </ion-item>
            -->
          </ion-list>
        </ion-card-content>
      </ion-card>
      
      <ion-card>
        <ion-card-header>
          <ion-card-title>Account Backup</ion-card-title>
          <ion-card-subtitle>
            Back up your account with a different login mechanism. You can only sync to one service at a time. <strong>Please do this to ensure your account is not lost.</strong>
          </ion-card-subtitle>
        </ion-card-header>
    
        <ion-card-content>
          <ion-list class="ion-no-padding">
    
            <ion-item-divider>Available Services</ion-item-divider>
    
            <ion-item *ngFor="let authMethod of authService.authMethods">
              <ion-icon slot="start" [icon]="authMethod.icon"></ion-icon>
              
              {{ authMethod.name }}
    
              <ion-button slot="end" 
                          size="small"
                          (click)="sync(authMethod.provider)" 
                          *ngIf="player.authType !== authMethod.type">
                          Sync
              </ion-button>
    
              <ion-label slot="end"
                        class="ion-text-right"
                        *ngIf="player.authType === authMethod.type">
                        Synced ({{ (gameService.player$ | async).authSyncedTo }})
              </ion-label>
            </ion-item>
    
            <ion-item-divider *ngIf="player.authType">Unsync</ion-item-divider>
    
            <ion-item color="danger" *ngIf="player.authType">
              <ion-label class="ion-text-wrap">You can also unsync your account, if you want. If you do this, and you lose access to your original account (clearing cache, etc), your account will vanish into the abyss. Not recommended, obviously.</ion-label>
              <ion-button color="warning" fill="outline" slot="end" (click)="unsync()">Unsync</ion-button>
            </ion-item>
          </ion-list>
        </ion-card-content>
      </ion-card>
    
      <ion-card color="danger">
        <ion-card-header>
          <ion-card-title>Danger Zone</ion-card-title>
        </ion-card-header>
    
        <ion-card-content>
          <ion-list class="ion-no-padding">
            <ion-item color="danger" class="ion-text-wrap">
              <ion-label class="ion-text-wrap">If you really, really, for some reason want to delete your character, you can do that! You will have to go through a few dialogs, and then it will be confirmed. I'm not gonna beg you or anything, b-b-b-baka, but know that no data will be retained if you choose to go through with it.</ion-label>
              <ion-button slot="end" fill="outline" color="warning" (click)="deleteCharacter()">Delete Character</ion-button>
            </ion-item>
          </ion-list>
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-content>
